<template>
  <div class="sku-tag">
    <el-form-item label="商品规格">
      <el-button @click="shopTagInput()">
        添加规格
      </el-button>
      <div
        v-for="(tag, tagIndex) in skuTags"
        :key="tagIndex"
      >
        <span>{{ tag.tagName }}</span>
        <el-button
          class="button-new-tag"
          type="text"
          icon="el-icon-delete"
          @click="removeTag(tagIndex)"
        >
          删除
        </el-button>
        <br>
        <el-tag
          v-for="(tagItem, tagItemIndex) in tag.tagItems"
          :key="tagItem.valueId"
          closable
          :disable-transitions="false"
          @close="handleTagClose(tagIndex, tagItemIndex)"
        >
          {{ tagItem.propValue }}
        </el-tag>
        <el-input
          v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
          :ref="`saveTagInput${tagIndex}`"
          v-model="tagItemInputs[tagIndex].value"
          class="input-new-tag"
          @keyup.enter="handleInputConfirm(tagIndex)"
          @blur="handleInputConfirm(tagIndex)"
        />
        <el-button
          v-else
          class="button-new-tag"
          @click="showTagInput(tagIndex)"
        >
          + 添加
        </el-button>
      </div>
    </el-form-item>
    <el-form-item
      v-show="isShowTagInput"
      label="规格名"
    >
      <el-col :span="8">
        <el-cascader
          :options="attrOptions"
          :show-all-levels="false"
          filter clearable
          @change="handleAttrIdChange()"
          placeholder="请选择商品属性"
        ></el-cascader>

<!--        <el-select
          v-model="addTagInput.propName"
          filterable
          allow-create
          default-first-option
          placeholder="请选择"
          @change="handleTagClick"
        >
          <el-option
            v-for="item in attrOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>-->
      </el-col>
    </el-form-item>
    <el-form-item
      v-show="isShowTagInput"
      label="规格值"
    >
      <el-col :span="8">
        <el-select
          v-model="addTagInput.selectValues"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择"
        >
          <el-option
            v-for="item in dbTagValues"
            :key="item.valueId"
            :label="item.propValue"
            :value="item.propValue"
          />
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button
        v-show="isShowTagInput"
        type="primary"
        @click="addTag()"
      >
        确定
      </el-button>
      <el-button
        v-show="isShowTagInput"
        @click="hideTagInput()"
      >
        取消
      </el-button>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    attrOptions: {
      type: Array,
      default: []
    },
    selNum: {
      typeof: Number,
      default: 1
    }
  },
  data() {
    return {
      skuTags: [],
      addTagInput: {},
      isShowTagInput: false,
      dbTagValues: [],
      unUseTags: []
    }
  },
  methods: {
    shopTagInput() {
      this.isShowTagInput = true;
      console.log("attrOptions", this.attrOptions);
    },
    handleAttrIdChange(val) {
      console.log('handleAttrIdChange', val);
    },
    removeTag(tagIndex) {},
    handleInputConfirm(tagIndex) {},
    showTagInput(tagIndex) {},
    handleTagClick() {},
    addTag() {},
    hideTagInput() {},
  }

}
</script>
